<template>
 <div class='w750'>
    <div class='write-comment review'>
        <div class="first-comment" v-if="isComment == 0">
            <div class="item-top">
                <div class="pro-mes">
                    <div class="pro-img"><img :src="$imgUrlHead + CommentMsg.prodPic" alt=""></div>
                    <div class="pro-name">
                        <span class="name">{{CommentMsg.prodName}}</span>
                        <span class="star-box star04"><i class="star"></i></span>
                    </div>
                </div>
                <div class="comment_gwq" @click="clickAnonymous">
                    <span class="choose" :class="isAnonymous ? 'cur' : ''"></span>
                    <em class="text">匿名发布</em>
                </div>
                <textarea class="area" placeholder="请输入您的评价" v-model='content'></textarea>
                <div class="file-img">
                    <span  class="add-img" v-for="(item, index) in dynamicPics" :key="index"><img :src="$imgUrlHead + item" alt=""><i class="del-img" @click="delpic(dynamicPics[index],index)">×</i></span>
                    <span  class="add-img files"  v-show="isAddImg">
                        <em class="add-img-default">+</em>
                        <!--<input type="file"  name="files" class="uploader" @change="add_img" accept="image/*" ref="picture"  />-->
                        <input type="file" name='files' accept="image/*" @change="add_img" v-if="!isApp" class="hiddenInput" ref="picture"/>
                        <div @click="showpic" v-if="isApp"></div>
                    </span>
                    <p class="add-img-tip">温馨提示：最多添加4张图片</p>
                </div>
            </div>
            <div class="store-score">
                <div class="tit"><img src="../../../assets/images/shopicon.png" alt="">宝贝评分</div>
                <div class="item">
                    <span class="item-tit">满意度</span>

                    <span class="s-level">
                            <van-rate
                                v-model="babyStars"
                                :size="20"
                                :count="5"
                                :color="themes.color"
                                void-color="#ccc"
                                @change="changeStars"
                            />
                    </span>
                </div>
            </div>
            <div class="store-score">
                <div class="tit"><img src="../../../assets/images/shopicon.png" alt="">店铺评分</div>
                <div class="item">
                    <span class="item-tit">物流服务</span>
                    <span class="s-level">
                        <van-rate
                            v-model="logisticsScore"
                            :size="20"
                            :count="5"
                            :color="themes.color"
                            void-color="#ccc"
                            @change="changelogisticsScore"
                        />
                    </span>
                </div>
                <div class="item">
                    <span class="item-tit">服务态度</span>
                    <span class="s-level">
                        <van-rate
                            v-model="shopScore"
                            :size="20"
                            :count="5"
                            :color="themes.color"
                            void-color="#ccc"
                            @change="changeshopScore"
                        />
                    </span>
                </div>
            </div>
            <div class="b-btn" @click="subcommentsSave" :class="themes.theme"><span  class="btn-r">发布</span></div>
        </div>

        <div class="review" v-if="isComment == 1">
            <div class="item-top">
                <div class="pro-mes">
                    <div class="pro-img"><img :src="$imgUrlHead +CommentMsg.prodPic" alt=""></div>
                    <div class="pro-name">
                        <span class="name">{{CommentMsg.prodName}}</span>
                        <span class="star-box">
                            <span class="s-level">
                                <van-rate
                                    v-model="CommentMsg.score"
                                    :size="16"
                                    :count="5"
                                    :color="themes.color"
                                    void-color="#ccc"
                                    :readonly = 'true'
                                />
                            </span>
                        </span>
                    </div>
                </div>
                <div class="last-comment">
                    <span class="txt">{{CommentMsg.content}}</span>
                    <span class="img" v-if="CommentMsg.photoList">
                        <img :src="$imgUrlHead +item" alt="" v-for="(item, index) in CommentMsg.photoList" :key="index">
                    </span>
                </div>
            </div>
            <div class="first-comment">
                <div class="item-top">
                    <div class="add-txt">追加评论</div>
					<textarea class="area" placeholder="对评价进行补充，更客观的给意见" v-model="content"></textarea>
					<div class="file-img">
                        <span  class="add-img" v-for="(item, index) in dynamicPics" :key="index"><img :src="$imgUrlHead + item" alt=""><i class="del-img" @click="delpic(dynamicPics[index],index)">×</i></span>
                        <span  class="add-img files"  v-show="isAddImg">
                            <em class="add-img-default">+</em>
                            <!--<input type="file"  name="files" class="uploader" @change="add_img" accept="image/*" ref="picture"  />-->
                            <input type="file" name='files' accept="image/*" @change="add_img" v-if="!isApp" class="hiddenInput" ref="picture"/>
                            <div @click="showpic" v-if="isApp"></div>
                        </span>
                        <p class="add-img-tip">温馨提示：最多添加4张图片</p>
                    </div>
				</div>
            </div>
            <!-- <textarea class="area" placeholder="对评价进行补充，更客观的给意见" v-model="content"></textarea> -->

            <div class="b-btn" @click="Releasereview" :class="themes.theme"><span  class="btn-r">发布追评</span></div>
        </div>
    </div>

   <!--上传图片选择-->
   <van-action-sheet
     v-model="picshow"
     :actions="actions"
     cancel-text="取消"
     @select="onSelect"
     @cancel="onCancel"
   />
   <!--/上传图片选择-->
 </div>
</template>

<script>
const MaxImg = 4
import { Rate } from 'vant';
import {  ActionSheet  } from 'vant';
import generalServiceImpl from "utils/upLoadPic";
import {imgPreview} from 'utils/compression'
import {upload, deletePic} from "api/common/common";
import {mapState} from 'vuex'
import {commentsSave , publish , append, addComm} from "api/comment";
 export default {
   data () {
     return {
         
        isComment:this.$route.query.isComment,
        content: '',  //评论内容
        dynamicPics: [], //存放添加图片
        babyStars: 0,  //宝贝星星
        logisticsScore: 0, //物流服务得分
        shopScore: 0, //卖家服务得分
        CommentMsg: '',
        isAnonymous: false,  //默认不匿名
       actions: [
         {
           name: '相册'
         },
         {
           name: '相机'
         }
       ],
       picshow: false,
       isApp:false

     }
   },
   mounted () {
       let that = this
      this.Ishas()

       if (this.isComment == 0) {
            publish({
                prodId: this.$route.query.prodId,
                subItemId: this.$route.query.subItemId
            }).then(res => {
                if (res.status == 1) {
                    this.CommentMsg = res.result
                }
            })
       } else {
          append({
            prodCommId: this.$route.query.id
          }).then(res =>{
              if (res.status == 1) {
                  this.CommentMsg = res.result
              }
          })
       }

   },
   methods: {
       //是否是app
       Ishas() {
         if(window.plus) {
           this.isApp = true
         }else {
           this.isApp = false
         }
       },
       // 弹出上传
       showpic() {
         this.picshow = true
       },
       //关闭弹窗
       onCancel() {
         this.picshow = false
       },
       onSelect(item) {
         this.picshow = false;
         if(item.name == '相册') {
           this.appendByGallery()
         }else if(item.name == '相机') {
           this.getImage()
         }
       },
       //相册上传图片
       appendByGallery() {
         let This = this
         generalServiceImpl.appendByGallery().then(res => {
           This.dynamicPics.push(res)
         })
       },
       //拍照上传图片
       getImage() {
         let This = this
         generalServiceImpl.getImage().then(res => {
           This.dynamicPics.push(res)
         })
       },
        goback() {
            this.$router.back();
            this.$router.isBack = true;
        },
        //提交
        subcommentsSave() {
            let that = this
            let params = {
                content: this.content,
                isAnonymous: this.isAnonymous,
                logisticsScore: this.logisticsScore,
                photoList: this.dynamicPics,
                prodId: this.CommentMsg.prodId,
                prodScore: this.babyStars,
                shopScore: this.shopScore,
                subItemId: this.CommentMsg.subItemId
            }
            commentsSave(params).then( res =>{
                if (res.status == 1) {
                   this.$toast({
                       message: '提交成功',
                       duration: 1000
                   })
                   setTimeout(() => {
                       that.goback()
                   }, 1500);
                } else {
                    this.$toast(res.msg)
                }
            })
        },
        add_img(event) {
            let _this = this
            let uri = ''
            let img1 = event.target.files[0]

            let photoFile1  = this.$refs.picture.files[0]
            let formData  = new FormData();



            imgPreview(photoFile1,function(compressImg) {

                // form.append('files',this.$refs.picture.files[0])

                formData.append('photos', compressImg)
                _this.$toast.loading({
                    message: '上传中...',
                    forbidClick: true,
                    duration: 0
                });
                upload(formData).then( res=> {

                    if (res.status == 1) {
                        _this.$toast.clear()
                        _this.$toast({
                            message: '上传成功',
                            duration: 1000
                        })
                        // reader.onloadend = function () {
                            _this.dynamicPics.push( res.result[0])
                        // }
                    } else {
                        _this.$toast.clear()
                        _this.$toast({
                            message: res.msg,
                            duration: 1000
                        })
                    }
                })
            })

        },
        //删除图片
        delpic(picPath,index) {
            let ImgIndex = index
            let imgs = this.dynamicPics
            this.$dialog.confirm({
                title: '是否删除此张图片',
                message: '请再三考虑哦~~~'
            }).then(() => {
                deletePic({
                    picPath: picPath
                }).then( res =>{
                    if (res.status == 1) {
                        this.$toast('删除成功')
                        imgs.splice(ImgIndex, 1);
                        this.dynamicPics = imgs
                    } else {
                        this.$toast(res.msg)
                    }
                })
            }).catch(() => {
            // on cancel
            });
        },
        //宝贝星星
        changeStars(event) {
            this.babyStars = event
        },
        //物流
        changelogisticsScore(event) {
            this.logisticsScore = event
        },
        //服务
        changeshopScore(event) {
            this.shopScore = event
        },
        //发布追评
        Releasereview() {
            let that = this
            let params  = {
                content: this.content,
                prodCommId: this.$route.query.id,
                photoList: this.dynamicPics   //--以后可能扩展
            }

            addComm(params).then(res => {
                if (res.status == 1) {
                   this.$toast({
                       message: '提交成功',
                       duration: 1000
                   })
                   setTimeout(() => {
                       that.goback()
                   }, 1500);
                } else {
                    this.$toast(res.msg)
                }
            })
        },
        clickAnonymous() {
            this.isAnonymous = !this.isAnonymous
        }
   },
   computed: {
        ...mapState(['themes']),
        isAddImg() {
           if (this.dynamicPics.length >= MaxImg) {
                return false;
            } else {
                return true;
            }
        }
   },
   components: {

   }
 }
</script>

<style src="../../../assets/css/write-comment.css" scoped></style>
<style scoped>
    .files {
        position :relative;
    }
    .files input {
        position: absolute;
        /* font-size: 100px; */
        right: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
    }
    .files div {
      position: absolute;
      /* font-size: 100px; */
      right: 0;
      top: 0;
      opacity: 0;
      width: 100%;
      height: 100%;
    }
    .comment_gwq {
        margin-top: 10px;
    }
    .comment_gwq .choose{
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url('../../../assets/images/choose.png') no-repeat;
        /* background: url(../images/choose.png)  */
        background-size: 18px 18px;
        vertical-align: bottom;
    }
    .comment_gwq .choose.cur {
        background: url('../../../assets/images/choosed.png') no-repeat;
        background-size: 18px 18px;
        vertical-align: bottom;
    }

    .comment_gwq  em {
        display: inline-block;
        color: #333;
        margin-left: 2px;
        font-size: 14px;
        vertical-align: middle;
    }


</style>
